<!-- fixed by mehaotian -->
<template>
	<div class="log-item-text" :class="{ 'text--only': only }">
		<Badge v-if="showTag" :text="tagName" :type="tagType" right="10" />
		<slot>-</slot>
	</div>
</template>

<script>
export default {
	name: 'LogItemText',
	functional: false,
	props: {
		showTag: {
			type: Boolean,
			default: true
		},
		/**
		 *  feat： 			新增 feature
		 *  fix: 				修复 bug
		 *  docs: 			仅仅修改了文档，比如 README, CHANGELOG, CONTRIBUTE等等
		 *  style: 			仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑
		 *  refactor: 	代码重构，没有加新功能或者修复 bug
		 *  perf: 			优化相关，比如提升性能、体验
		 *  test: 			测试用例，包括单元测试、集成测试等
		 *  chore: 			改变构建流程、或者增加依赖库、工具等
		 *  revert: 		回滚到上一个版本
		 */
		tagType: {
			type: String,
			default: 'feat'
		},
		// 单独使用的情况下，左侧留空白
		only: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		tagName() {
			let name = '新增';
			switch (this.tagType) {
				case 'feat':
					name = '新增';
					break;
				case 'fix':
					name = '修复';
					break;
				case 'docs':
					name = '文档';
					break;
				case 'refactor':
					name = '重构';
					break;
				case 'perf':
					name = '优化';
					break;
				case 'test':
					name = '测试';
					break;
				case 'revert':
					name = '回滚';
					break;
			}
			return name;
		}
	}
};
</script>

<style lang="stylus" scoped>
.log-item-text
	position relative
	padding 10px 0
	padding-left 15px
	color #5e6d82
	display flex
	align-items center
	box-sizing border-box
	>>> .badge
		flex-shrink 0
	&::after
		content ''
		position absolute
		left 0
		top 0
		bottom 0
		margin auto
		width 5px
		height 5px
		border 1px #C0C0C0 solid
		border-radius 50%
	&.text--only
		margin-left 25px
		&::after
			width 7px
			height 7px
			border none
			background-color #ddd
</style>
